<template>
	<div class="cart">
		<h3>我的购物车清单</h3>
		<ul class="cart">
			<li>
				<p>图片</p>
				<p>商品名称</p>
				<p>商品价钱</p>
				<p>商品数量</p>
				<p>商品总价</p>
				<p>复选框</p>
				<p>编号</p>
			</li>
			<li v-for="item in list" :key="item.id">
				<p><img :src="`${$Imgurl}/showImg/${item.picture}`" /></p>
				<p>{{item.name}}</p>
				<p>{{item.money}}</p>
				<p>{{item.num}}</p>
				<p>{{dolls}}</p>
				<p><input type="checkbox" placeholder="复选框"></p>
				<p>{{number}}</p>
			</li>
		</ul>
	</div>
</template>
		
<script>
export default{
	name : 'cart',
		data(){
			return{
				list : [],
			}
		},
		methods:{
			add(){
				this.$router.push('/admin/banneradd');
			}
		},
		// 组件创建之后
		created(){
			this.axios.get('/api/adm/hot/findAll').then( (res)=>{
				// 请求成功
				if(res.status === 200 ){
					this.list = res.data.data;
				}
			} ).catch( (error)=>{
				console.log(error);
			})
		}
	}
</script>


<style>
.cart{
	width: 90%;
	margin-left: 5rem;
}
.cart h3{
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 2rem;
	border-bottom: 2px solid orangered;
}
.cart ul{
	margin: 20px auto 0;
	overflow: hidden;
	border-top: 2px solid #C64263;
}
.cart ul li{
	width: 100%;
	display: flex;
	line-height: 50px;
	border-bottom: 2px solid #C64263;
}
.cart ul li p{
	width: 10%;
	border-right: 2px solid #C64263;
	text-align: center;
}
.cart ul li:first-child p{
	font-weight: bold;
}
.cart ul li p:nth-child(1){
	width: 50%;
	border-left: 2px solid #C64263;
}
.cart ul li p:nth-child(4){
	width: 20%;
}
.cart ul li button{
	width: 70%;
	border: none;
	padding: 10px 0px;
	border-radius: 8px;
	color: coral;
}
.cart ul li img{
	height: 50px;
	vertical-align: middle;
}
</style>